.todo-content-calendar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: auto;

  .header {
    padding: 7px;
    display: grid;
    grid-template-columns: 32px 1fr 200px 64px;

    .title {
      margin-left: 7px;
      line-height: 32px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .arco-progress-line-text {
      margin-left: 0;
    }
  }

  .content-calendar-main {
    position: absolute;
    top: 46px;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    background-color: transparent;
    color: var(--td-text-color-primary);
    min-width: 752px;

    .calendar {
      margin: 0 7px;
      width: 33%;
      height: 100%;
      position: relative;

      .article {
        position: absolute;
        top: 280px;
        left: 0;
        right: 0;
        bottom: 9px;
        border: 1px solid var(--color-neutral-3);
        border-radius: var(--border-radius-medium);


        .title {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          font-size: 1.3rem;
          line-height: 46px;
          padding-left: 14px;
        }

        .list {
          position: absolute;
          top: 46px;
          left: 0;
          right: 0;
          bottom: 0;
          overflow: auto;
          border-radius: 2px;
        }
      }
    }

    .right {
      position: absolute;
      top: 0;
      right: 9px;
      width: calc(66% - 17px);
      height: calc(100% - 11px);
      border: 1px solid var(--color-neutral-3);
      border-radius: var(--border-radius-medium);

      .title {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        font-size: 1.3rem;
        line-height: 46px;
        padding-left: 14px;
      }

      .list {
        position: absolute;
        top: 46px;
        left: 0;
        right: 0;
        bottom: 0;
        overflow: auto;
        border-radius: 2px;

        .card-todo-item {
          margin: 14px 14px;
        }
      }

    }

    .add {
      position: absolute;
      right: 28px;
      bottom: 28px;
    }
  }

}

.calendar {
  Button {
    background-color: var(--color-fill-2);
  }
}
